<template>
    <div>
        <div class="top">
            <div @click="tocart">&lt;</div>
            <div>地址管理</div>
        </div>
        <div class="addrlist">
            <van-address-list
            :list="addresses"
            default-tag-text="默认"
            :switchable="false"
            @add="onAdd"
            @edit="onEdit"
            >
                <!-- 这里的item代表当前这一个地址的完整内容 -->
                <template #item-bottom="item">
                    <van-button class="removeAddr" icon="delete-o" type="default" @click="removeAddr(item.id)"></van-button>
                </template>
            </van-address-list>
        </div>
        <van-dialog v-model="show" :title="title" :show-confirm-button="false" 
        :close-on-click-overlay="true"
        :show-cancel-button="false">
        <van-address-edit
            :area-list="areaList"
            :address-info="AddressInfo"
            show-postal
            show-set-default
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            />
        </van-dialog>
    </div>

</template>

<script>
import Vue from 'vue';
import { AddressList } from 'vant';
import { Dialog } from 'vant';
import { AddressEdit } from 'vant';
import { areaList } from '@vant/area-data';
import {saveAddr, getAddrs, delAddr} from '@/request'
import {Toast} from 'vant'
import {getCookie} from '@/utils/cookie'
import { Button } from 'vant';

Vue.use(Button);
Vue.use(Toast);
Vue.use(AddressEdit);
// 全局注册
Vue.use(Dialog);
Vue.use(AddressList);

export default {
    data(){
        return{
            addresses:[],
            show:false,
            areaList:areaList,
            AddressInfo:{},
            title:'添加地址',
        }
    },
    created(){
        this.getAddresses()
    },
    methods:{
        getAddresses(){
            getAddrs().then(data=>{
            this.addresses = data.data.map(item =>{
                item.address = item.province + item.city +item.county+item.addressDetail
                return item
            })
        })
        },
        onAdd(){
            this.show =true
        },
        onSave(content){//这里的content参数就是表单里的数据
            //获取用户名，并保存在地址内容中
            var username = getCookie('username')
            content.username = username
            saveAddr(content).then(data =>{
                //提示：数据保存成功。 同时要关闭窗口
                Toast.success(data.msg)
                this.show = false
                //清空添加地址表单中的数据
                this.AddressInfo ={}
                //重新获取地址
                this.getAddresses()
            })

        },
        onEdit(item){//这里的item表示我们要修改的那个地址的全部数据
            //将‘地址添加’标题改为‘地址编辑’
            this.title ='地址编辑'
            this.show = true
            this.AddressInfo = item
        },
        tocart(){
            this.$router.push('/cart')
        },
        removeAddr(id){
            //先询问是否确认删除
            Dialog.confirm({
                title: '删除地址',
                message: '你确认要删除吗？',
            })
            .then(()=>{
                delAddr(id).then(data =>{
                    if(data.code ===1){
                        var _this = this
                        Toast.success({
                            message:data.msg,
                            onClose(){
                                //刷新页面
                                _this.getAddresses()
                            }
                        })
                    }
                })
            })

            .catch(()=>{
                Toast.success('已取消')
            })
        }
    }
}
</script>

<style scoped>
.van-address-item{
        position: relative;
    }
    .van-button.removeAddr{
        border: hidden;
        position: absolute;
        right: 60px;
        top: 50%;
        transform: translateY(-50%)
    }
    .top{
        padding: 10px 20px;
        border-bottom: 2px solid #ccc;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .top>div:first-child{
        margin-right: 20px;
    }
    .top>div:last-child{
        flex: 1;
        text-align: center;
    }
</style>